<template>
    <div class="header" :style="headerStyle">
        <h2 class="title" :style="titleStyle">{{ title }}</h2>
        <h3 class="subtitle" :style="subtitleStyle">{{ subtitle }}</h3>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { useDark } from '@vueuse/core'

defineProps({
    title: {
        type: String,
        required: true
    },
    subtitle: {
        type: String,
        default: ''
    }
})

const isDark = useDark() // 获取当前是否为深色模式

//  标题始终为蓝色
const titleStyle = computed(() => ({
    color: '#409EFF'
}))

// 动态设置副标题文字颜色，深色模式下副标题为白色，浅色模式下副标题为黑色
const subtitleStyle = computed(() => ({
    color: isDark.value ? 'white' : '#000'
}))
</script>

<style scoped>
.header {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: 8px;
}

.title {
    margin: 0 0 0.625rem;
    text-align: left;
    font-size: 2.125rem;
}

.subtitle {
    margin: 0;
    text-align: left;
    font-size: 1.5rem;
}
</style>
